<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>过渡效果</title>
    <style>
      .v-enter-from {
        opacity: 0;
      }
      .v-enter-active {
        transition: all 5s;
      }
      .v-enter-to {
        opacity: 1;
      }
      .v-leave-from {
        opacity: 1;
      }
      .v-leave-active {
        transition: all 5s;
      }
      .v-leave-to {
        opacity: 0;
      }

      /* .slide-enter-from { left: 200px; }
    .slide-enter-active { transition: all 5s; }
    .slide-enter-to { left: 0px; }
    .slide-leave-from {left: 0px; }
    .slide-leave-active { transition: all 5s; }
    .slide-leave-to { left: 500px; } */

      @keyframes slide {
        from {
          left: 500px;
        }
        to {
          left: 0;
        }
      }
      .slide-enter-from {
        left: 200px;
      }
      .slide-enter-active {
        animation: slide 5s ease;
      }
      .slide-enter-to {
        left: 0px;
      }
      .slide-leave-from {
        left: 0px;
      }
      .slide-leave-active {
        animation: slide 5s ease;
      }
      .slide-leave-to {
        left: 500px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <button @click="flag = !flag">切换flag</button> {{flag}}
      <Transition>
        <div v-if="flag">flag为真显示，为假隐藏</div>
      </Transition>
      <Transition name="slide">
        <div style="position: absolute" v-if="flag">flag为真显示，为假隐藏</div>
      </Transition>
    </div>
  </body>
  <script src="../lib/vue.global.js"></script>
  <script>
    Vue.createApp({
      data() {
        return {
          flag: true,
        };
      },
    }).mount("#app");
  </script>
</html>
